<template>
  <uni-popup ref="reportPopup" type="center" :mask-click="false">
    <view class="ReportDialog-container">
      <image src="@/static/guanbi@3x.png" @click="close" class="close-icon"></image>
      <view class="body">
        <view class="title">求赞求鼓励！</view>
        <view class="desc">如果您觉得好用，请给5星好评。如果您有任何意见，请直接向我们吐槽，帮助我们改进！</view>
      </view>
      <view class="btns-container">
        <view class="btn" @click="toReport">差评吐槽</view>
        <view class="btn confirm" @click="toAppStore">5星好评</view>
      </view>
    </view>
  </uni-popup>
</template>

<script>
import {mapGetters} from 'vuex';
import utils from "@/libs/utils";
import reportUtils from "@/libs/reportUtils";
import Storage from "@/libs/Storage";
import {reportRecordApi} from "@/api";

export default {
  name: 'ReportDialog',
  data() {
    return {}
  },
  mounted() {
    // this.open()
  },
  computed: {
    ...mapGetters(['platform'])
  },
  methods: {
    async open(gesture = false) {
      if (!gesture) {
        // #ifdef APP-PLUS
        console.log('app 不弹')
        return
        // #endif

        if (await Storage.get('report')) {
          console.log('谈过了')
          return
        }
      }
      await Storage.set('report', 1)
      this.$refs.reportPopup.open()
    },
    saveRecord(status) {
      reportRecordApi.create(status)
    },
    close() {
      this.$refs.reportPopup.close()
    },
    toAppStore() {
      // #ifdef APP-PLUS
      let appStoreInstalled = false
      if (this.platform === 'android') {
        appStoreInstalled = reportUtils.hasAndroidAppStoreInstalledWithMinePackage()
      } else {
        appStoreInstalled = true
      }

      if (appStoreInstalled) {
        this.saveRecord(1)
        this.close()
        return utils.toAppStore()
      }
      // #endif

      // #ifdef MP-WEIXIN
      try {
        var plugin = requirePlugin("wxacommentplugin");
        plugin.openComment({
          success: (res) => {
            console.log('plugin.openComment success', res)
            this.saveRecord(1)
            uni.showToast({
              title: '反馈成功，感谢您的鼓励！',
              icon: 'none',
              duration: 2000
            })
          },
          fail: (res) => {
            // errCode === -3 取消
            console.log('plugin.openComment fail', res)
          }
        })
        return this.close()
      } catch (e) {
        console.log(e)
      }
      // #endif
      this.saveRecord(1)
      uni.showToast({
        title: '反馈成功！',
        icon: 'none',
        duration: 2000
      })
      this.close()
    },
    toReport() {
      this.saveRecord(2)
      this.close()
      uni.navigateTo({
        url: '/pages/report/report'
      });
    },
  }
}
</script>

<style scoped lang='scss'>
.ReportDialog-container {
  background-image: url("http://down.qwdata.vip/app_icon/1677251035467");
  width: 554upx;
  background-size: 554rpx auto;
  background-position: top;
  background-repeat: no-repeat;
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: 30rpx;

  .body {
    margin-top: 290rpx;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 30rpx;
    text-align: center;

    .title {
      font-size: 18px;
      font-weight: bold;
      margin-bottom: 20rpx;
    }

    .desc {
      font-size: 16px;
      line-height: 50rpx;
      margin-bottom: 30rpx;
    }
  }

  .btns-container {
    padding-left: 30rpx;
    padding-right: 30rpx;
    display: flex;
    padding-bottom: 30rpx;
    background-color: #fff;
    border-radius: 30rpx;
  }

  .close-icon {
    width: 24upx;
    height: 24upx;
    position: absolute;
    right: 30upx;
    top: 140upx
  }

  .btn {
    flex: 1;
    height: 94upx;
    margin-left: 24upx;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    margin-bottom: 25upx;
    background-color: #bbb;
    border-radius: 50px;
    font-size: 16px;

    &:first-child {
      margin-left: 0;
    }

    &.confirm {
      background-color: #2d90fc;
      border-radius: 50px;
      color: #fff;
    }
  }
}
</style>
